<template>
  <div>

    <el-menu :default-active="activeMenu" class="custom-menu"  @open="handleOpen" @close="handleClose"
    :collapse="!$store.getters.siderType"  text-color="#535353" background-color="#e6e6e6"
    active-text-color="#3F86FF" :collapse-transition="false">
      <!--              <h4>{{ !$store.getters.siderType ? '健康云' : '智慧健康云系统' }}</h4>-->
      <template v-for="(item,index) in menuTreeList">
      <el-submenu v-if="item.children && item.children.length" :index="item.id.toString()" :key="item.id">
      <template slot="title">
      <i :class="'el-icon-' + iconList[index]"></i>
      <span slot="title">{{ item.moniker }}</span>
      </template>
      <template>
      <el-menu-item style="margin-left: 20px" :index="item2.id.toString()" :key="item2.id"
                  v-for="item2 in item.children" @click.native="navigateTo(item2.url,item2.id,item2)">
      <i :class="'el-icon-' + icon"></i>
      {{ item2.moniker }}
      </el-menu-item>
      </template>
      </el-submenu>
      <el-menu-item v-else :index="item.id.toString()" :key="item.id" @click="navigateTo(item.url,item.id,item)">
      <i :class="'el-icon-' + iconList[1]"></i>
      <span slot="title"> {{ item.moniker }}</span>
      </el-menu-item>
      </template>
    </el-menu>



  </div>

</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      isCollapse: false,
      menuTreeList: [],
      activeMenu: '2', // 默认选中的菜单项,
      iconList: ['user', 'box', 'suitcase-1', 'tickets', 'pie-chart', 'receiving', 'c-scale-to-original', 'setting', 'tickets', 'document-add', 'takeaway-box', 'monitor', 'reading', 'files', 'shopping-bag-2', 'price-tag', 'set-up', 'first-aid-kit', 'money'], // 一级图标
      icon: 's-operation' // 二级图标
    };
  },
  computed: {
  },
  mounted() {
    this.menuTreeList = this.$store.state.user.treeMenu
    // 页面加载完成后，从localStorage中恢复选中状态
    this.activeMenu = sessionStorage.getItem('activeMenu') || '';
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    navigateTo(url, id, item) {
      // console.log(item)
      if (url) {
        // console.log(url,id)
        sessionStorage.setItem('activeMenu', id);
        this.$router.push({path: url});
      } else {
        console.warn('URL is not defined for the menu item');
      }
    },
  }
}
</script>
<style scoped>
.custom-menu {
  //background: url("../../assets/login/menuBg.png") no-repeat bottom ;
  //background-size: 200px 210px ;
  //background: linear-gradient(180deg, #1d7df9 0%, #6eb3ff 100%);
  border-right: none !important;

}
::v-deep .el-menu{
}

::v-deep .is-active{
  background-color: #E6F7FF !important;
}
::v-deep .el-menu-item.is-active {
  background-color: #E6F7FF !important;
  border-right: 4px solid #1890FF;
}
::v-deep .el-menu-item {
  margin-left: 0 !important;
}
.medical-icon {
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: 150px;
  opacity: 0.8;
}
::v-deep .el-menu-item:hover {
  background-color: #E6F7FF !important;
  border-right: 4px solid #1890FF;
}

::v-deep .el-menu--vertical, .el-menu-item:hover {
  background-color: #E6F7FF !important;
  border-right: 4px solid #1890FF;
}



</style>
